در اين جلسه از آموزش طراحی وب سایت css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.

اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم

گفتيم که در css شش نوع گزينشگر براي انتخاب المنتها وجود دارد که يگي از ان ها کلاس هاي کاذب (pseudo-class) بودند، که اين سلکتورها براي نمايش رويدادهاي صفحه از جمله، کليک، هاور، فوکوس و ... استفاده مي شوند. در css کلاس هاي کاذب ديگري نيز وجود دارد که مربوط به طريقه انتخاب فرزندان (child) يک المنت پدراست. ما ميخواهيم در اين جلسه  طراحی وب سایت در مورد آن ها توضيح دهيم.

کلاس هاي کاذب توارثي

 

کد html زير را در نظر بگيريد

1

<ul>

2

 <li>Lang

3

 <ul>

4

 <li>HTML</li>

5

 <li>CSS</li>

6

 <li>Javascript</li>

7

 </ul>

8

 </li>

9

 

10

<li>CMS

11

 <ul>

12

 <li>Wordpress</li>

13

 <li>Joomla</li>

14

 <li>Drupal</li>

15

 </ul>

16

 </li>

17

</ul>

حال اگر بخواهيم به هر يک از اين گزينه ها يک رنگ متفاوت اختصاص دهيم، چه ميکرديم؟ حتما براي هر يک class تعريف مي کرديم و رنگ مورد نظر را انتخاب مي کرديم. خب اين روش درست است اما اگر ندانيم class آن چيست چطور؟ اگر سايت  طراحی وب سایت دايناميک باشد، و اين اطلاعات بعدا اضافه شود به طوريکه نميتوان براي آن ها class تعريف کرد؟؟ در اين صورت بايد از کلاس هاي کاذب توارثي استفاده کنيم.

 

حال به تعريف دقيقتر اين کلاس هاي کاذب مي پردازيم :

  طراحی وب سایت 

nth-child(n) و nth-last-child(n)

 

 

nth-child(n) : با استفاده از اين کلاس کاذب مي توان براي تک تک المنت هاي يک صفحه طراحی وب سایت ، بدون استفاده از id يا class براي آن ها يک استايل متفاوت تعيين کنيم.

حرف n در داخل پرانتز يک عدد طبيعي است 1,2,3,...

اين عدد تعيين کننده چندمين فرزند از يک المنت پدر است

به طور مثال اولين تگ شماري 1 را دارد دومين شماره 2 و...

به کد css زير دقت کنيد تا متوجه شويد چگونه ميتوانيم به هر يک از li هاي کد html بالا استايل متفاوت دهيم.

1

ul li {

2

 color: blue;

3

 font: 24px tahoma;

4

 text-shadow: -1px 1px 1px #333;

5

}

6

 

7

ul li:nth-child(1){color: red;}

8

ul li:nth-child(2){color: green;}

9

ul li:nth-child(1) li:nth-child(1){color: orange;}

10

ul li:nth-child(1) li:nth-child(2){color: brown;}

11

ul li:nth-child(1) li:nth-child(3){color: pink;}

12

ul li:nth-child(2) li:nth-child(1){color: gray;}

13

ul li:nth-child(2) li:nth-child(2){color: silver;}

14

ul li:nth-child(2) li:nth-child(3){color: yellow;}

البته در مروگر ie فقط از نسخه 9+ کار ميکند.

اگر کد را اجرا کنيد نتيجه اي شبيه زير خواهيد داشت.

 

کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل ميکند، به اين صورت که از اخر به شمارش المنت ها ميپرداز.

اگر nth-last-child را جايگزين nth-child در کد css بالا کنيم نتيجه کد  طراحی وب سایت  به شکل زير خواهد بود.

 

first-child و last-child

 

  طراحی وب سایت 

 

همانطور که از اسم کلاس ها معلومه first-child اولين فرزند از يک المنت پدر last-child آخرين فرزند از يک المنت پدر رو انتخاب ميکنند.

کد css زير را به کدهاي css بالا اضافه کنيد

1

ul li:first-child li {font-size: 18px;}

2

ul li:last-child li {font-size: 14;}

نتيجه

 

ديگر کلاس هاي کاذب

 

 

selection : اين کلاس  طراحی وب سایت  کاذب استايل المنت را هنگامي که ان را انتخاب ميکنيم، (در حالي که کليک چپ رو نگه داشتيم روي المنت ميکشيم يا CTRL + A ( در حالت پيشفرض مرورگرها

هنگامي که به طور مثال متني رو انتخاب ميکنيم، رنگ متن سفيد، و پس زمينه ان آبي ميشود. ما توانيم با استفاده از اين کلاس کاذب اين رنگ را هر کدام از المنتها تغيير دهيم يا ان را براي کل صفحه تعيين کنيم.

کد css :

1

::selection {

2

 background: #999;

3

 color: #edb;

4

}

5

 

6

::-moz-selection {

7

 background: #999;

8

 color: #edb;

9

}

10

 

11

::-webkit-selection {

12

 background: #999;

13

 color: #edb;

14

}

المنت هاي کاذب (pseudo-elemnt)

 

 

بعلاوه کلاس هاي کاذبي  طراحی وب سایت  که گفتيم، المنت هاي کاذب نيز وجود دارند.

::first-letter تغيير استايل اولين کاراکتر از يک متن.

کد html :

1

<p>7lea: javascript and web design tutarials</p>

کد css :

 

1

p {font-size: 20px;}

2

p::first-letter {font-size: 36px;}

 

  طراحی وب سایت 

::first-line تغيير استايل اولين خط از يک متن.

 

1

<p>7lea: javascript and web design tutarials<br>7lea: javascript and web design tutarials</p>

کد css :

  طراحی وب سایت 

1

p {font-size: 20px;}

2

p::first-line {font-size: 36px;}

بسيار خب آموزش اين جلسه طراحی وب سایت نيز به پايان رسيد در جلسه بعدي به معرفي گزينشگرهاي صفت (attribute) و باقي گزينشگرها ميپردازيم.

 

 

پایه و اساس هر طراحی وب سایت

 

html چیست؟
 پایه و اساس هر طراحی وب سایت اینترنتی است که از سه بخش کلی و اصلی و و تشکیل شده است.
در این روش شما صفحه ای را در دست دارید که با نوشتن کدهای جدید و یا کاهش و افزایش کدهای پیشین میتوانید به قالب مورد نظرتان دست یابید.
xhtml چیست؟
 نوع دیگر نوشتن کدها ِطراحی وب سایت یک صفحه اینترنتی ست با این تفاوت که برای نمایش خود به دستوراتی نیاز دارد که در قسمت head جای گرفته اند و یا در قالب یک فایل جداگانه با پسوند  انجام وظیفه میکنند. مثلا وقتی میخواهید برای قسمت پست یک وبلاگ نوع فونت، رنگ و سایز آن را تعیین کنید باید این دستور را در قسمت در بخش و یا در فایل  مربوط به آن صفحه اعمال کنید و لازم نیست مانند  قبل از هر متن از تگ (کد)استفاده کنید.

توجه: استفاده از دستورات style به طور دلخواه طراح میتواند در یک فایل css. و یا در همان صفحه مورد نظر در قسمت head و به صورت کد صورت بگیرد. در هر دو روش نتیجه یکسان خواهد بود.
css چیست؟
دستورات (style sheet) ی که نحوه نمایش یک صفحه طراحی وب سایت را مشخص می کنند  نامیده میشوند و در صورتی که بخواهند در یک فایل جداگانه ایفای نقش کنند در فایلی با پسوند css. جای میگیرند. به عبارت دیگر:  ساختار اصلی صفحات وب را تعیین می کند و  شکل ظاهری آن را.

بعد از هر جستجوی  در میان صفحات فارسی به وبگاههایی خواهیم رسید که  را از نظر لغوی معنی کرده اند با این حال برای کامل بودن این سری آموزشی به تکرار مکررات هم میپردازم.
 مخفف کلمه  و به معنی مجموعه طبقه بندی شده و یا مجموعه آبشاری است.
HTML بهتر است و یا XHTML ؟
یکی از اصلی ترین و مهمترین ویژگی های طراحی وب سایت مطابقت آن با استانداردهای جهانی دسترسی سایت  و به    طراحی شده اند با مرورگرهای مختلف سازگارند : 

--------------------------------------------------------------------------------------------------
در این سری آموزشی شما می توانید طراحی قالبهای تک ستونه، دو ستونه، سه ستونه، چهار ستونه، ایجاد header و footer و همین طور طراحی انواع قالبهای سایت را طبق نیاز و سلیقه خودتان بیاموزید و به راحتی در این قالبها فارسی بنویسید. این قالبها قابل استفاده برای انواع سیستمهای وبلاگ و سایت از جمله: و ... میباشند و فقط کافیست تا کدهای مورد نظرتان را در میان این کدها و در جایگاه مورد نظرتان قرار دهید. برای طراحی وب سایت به یکی از نرم افزارهای ویرایش صفحات وب مانند نیاز دارید و همینطور لازم است تا برای آزمایش صفحات ایجاد شده مرورگرهای i را روی سیستم خود داشته باشید اگر مرورگر  هم داشته باشید بی شک طراحی مطمئن تر و کامل تری را خواهید داشت.